<template>
    <div id="wai">
        <div id="nei">
            <h1 class="title">{{ msg }}</h1><button class="change_news" @click="change_news">{{ change_goods
            }}</button><br />
            <div class="form_news">
                <label>商品名称：<input v-model="goods.goods_name" :style="styleObject" type="text" :readonly="isReadOnly"
                        placeholder="商品名称"></label><br>
                <label>商品价格：<input v-model="goods.goods_prace" :style="styleObject" type="text" :readonly="isReadOnly"
                        placeholder="价格"></label><br>
                <label>剩余数量：<input v-model="goods.goods_count" :style="styleObject" type="number" :readonly="isReadOnly"
                        placeholder="数量"></label><br>
                <button class="but" :disabled="isReadOnly" @click="refer_to">提交</button>
                <button class="but" :disabled="isReadOnly" @click="reset">重置</button>
                <button class="but" :disabled="isReadOnly" @click="delete_goods">下架</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: '修改商品',
            change_goods: '修改',
            styleObject: {
                'background-color': 'rgba(156, 156, 156, 0.558)'
            },
            isReadOnly: true,
            goods: {
                goods_name: this.$route.params.news.name,
                goods_prace: this.$route.params.news.price,
                goods_count: this.$route.params.news.count,
                session_id: this.$auth.getAuthorization(),
                goods_id: this.$route.params.id
            }
        }
    },
    methods: {
        //修改商品信息，提交
        refer_to() {
            this.$http.post('change_goods.php', { 'data': this.goods },
                {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    }
                }).then(response => {
                    if (response.data.status === 1) {

                        alert(response.data.message);
                        this.$router.push('/user/merchandise_control/my_goods');
                        // console.log(response);
                    } else {
                        alert(response.data.message);
                        // console.log(response);
                    }
                    // this.address = response.data.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        reset() {
            this.goods = {
                goods_name: '',
                goods_prace: '',
                goods_count: '',
                session_id: this.$auth.getAuthorization(),
                goods_id: this.$route.params.id
            }
        },
        change_news() {
            this.isReadOnly = !this.isReadOnly;
            this.change_but_text = this.isReadOnly ? '修改' : '不修改';
            this.styleObject['background-color'] = this.isReadOnly ? 'rgba(156, 156, 156, 0.558)' : 'white';
        },
        delete_goods() {
            this.$http.post('xiajia_goods.php', { 'goods_id': this.$route.params.id, 'session_id': this.$auth.getAuthorization() },
                {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    }
                }).then(response => {
                    if (response.data.status === 1) {

                        alert(response.data.message);
                        this.$router.push('/user/merchandise_control/my_goods');
                        console.log(response);
                    } else {
                        alert(response.data.message);
                        // console.log(response);
                    }
                    // this.address = response.data.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },


    },
    created() {

    }
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#wai {
    #nei {
        font-size: 30px;

        .title {
            margin-top: 3%;
            font-size: 50px;
            float: left;
        }

        .change_news {
            float: right;
            height: 50px;
            width: 150px;
        }

        .form_news {
            margin-top: 10%;
        }

        input {
            margin-top: 1%;
            font-size: 25px;
        }

        .but {
            margin-left: 10%;
            margin-top: 5%;
            width: 150px;
            height: 50px;
        }
    }

}
</style>
                                                                          